import { reactive } from 'vue';
<template>
  <div>
    <h3>readonly()</h3>
    <p>
      接受一个对象 (不论是响应式还是普通的) 或是一个
      ref，返回一个原值的只读代理Proxy。只读代理是深层的：对任何嵌套属性的访问都将是只读的。
    </p>
    <hr />
    <p>readonlyUser: {{ readonlyUser }}</p>
    <button @click="setReadonlyUser">setReadonlyUser</button>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  readonly,
  isRef,
  isReactive,
  isReadonly,
  isProxy,
} from "vue";
export default {
  name: "Vue3Course02Readonly",
  setup() {
    // 普通对象
    // const user = {
    //   uname: "小明",
    //   other: {
    //     uage: 22,
    //   },
    // };

    // Proxy对象
    const user = reactive({
      uname: "小明",
      other: {
        uage: 22,
      },
    });
    // const man = ref(true);
    const man = ref({
      a: 1000,
    });
    console.log(man);
    console.log("isReactive: ", isReactive(man));
    console.log("isRef: ", isRef(man));
    console.log("isProxy: ", isProxy(man.value));
    console.log("isReadonly: ", isReadonly(man));

    const readonlyUser = readonly(user);
    console.log("isReadonly: ", isReadonly(readonlyUser));
    const setReadonlyUser = () => {
      // [Vue warn] Set operation on key "uage" failed: target is readonly。
      // readonlyUser.uname = "小王";
      // readonlyUser.other.uage = 32;
      readonlyUser.other.address = "郑州市";
      console.log("----", readonlyUser);
    };

    return {
      readonlyUser,
      setReadonlyUser,
    };
  },
};
</script>

<style lang="less" scoped></style>
